<template>
  <div>
    <el-dialog
        :title="title"
        append-to-body
        @close="dialogClose"
        :visible.sync="visible"
        v-bind.sync="$attrs"
        :width="width">
      <TableForm :config="innerTableConfig"   ref="v2Table" highlight-current-row></TableForm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commons from "utils/commons";

export default {
  name: "DialogTable",
  props:{
    title: '' ,
    width: "80%" ,
    type: 'radio',
    value: false ,
    tableConfig:{
      type: Object,
      required: true
    },
    columns:{
      type: Array,
      required: true
    }
  },
  computed:{
    visible:{
      get(){
        return this.value ;
      },
      set(val){
        this.$emit("input",val)
      }
    },
    innerTableConfig(){
      return {
        ...this.tableConfig ,
        columns: this.getColumns()
      }
    }
  },
  watch:{
    visible(v){
      if(v){
        this.$nextTick(()=>{
          this.$refs.v2Table.getFirst();
        })
      }
    },
  },
  methods:{
    getColumns(){
      return [{
        type: 'selection',
        title: '选择'
      }].concat(this.columns)
    },
    dialogClose(){
      this.$emit("input",false);
    },
    onSubmit(){
      let row = this.$refs.v2Table.getSelectCurrentRow();
      if(commons.isVoid(row)){
        this.$message.warning("请选择数据")
        return
      }
      this.$emit("submit",row)
      this.dialogClose()
    },
  }
}
</script>

<style scoped>

</style>